<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/style.css">
    <title>UI</title>
    <style>
        button {
            margin: 5px;
            padding: 5px;
            border: solid 1px rgb(84, 230, 166);
            background: rgb(83, 230, 205);
            cursor: pointer;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div>
        <button class="one">成功</button>
        <button class="one">警告</button>
        <button class="one">提示</button>
        <button class="one">失败</button>
        <br>
        <button class="two">成功--显示关闭按钮</button>
        <button class="two">警告--显示关闭按钮</button>
        <button class="two">提示--显示关闭按钮</button>
        <button class="two">失败--显示关闭按钮</button>
        <br>
        <button class="ld">显示loading</button>
        <br>
        <button class="ul">上传文件</button>
    </div>
    <script src="./index.js"></script>
    <script>
        /* UI变量是 文件种暴露出来的模块 */
        // 第一种
        let btnsOne = document.getElementsByClassName('one');
        [...btnsOne].forEach((item, index) => {
            if (index == 0) {
                item.addEventListener('click', () => {
                    UI.Message.success("成功");
                })
            }
            if (index == 1) {
                item.addEventListener('click', () => {
                    UI.Message.warning("警告");
                })
            }
            if (index == 2) {
                item.addEventListener('click', () => {
                    UI.Message.error("失败");
                })
            }
            if (index == 3) {
                item.addEventListener('click', () => {
                    UI.Message.info("info");
                })
            }
        })
        // 第二种 duration为显示时间 值为0为永不关闭
        let btnsTwo = document.getElementsByClassName("two");
        [...btnsTwo].forEach((item, index) => {
            if (index == 0) {
                item.addEventListener('click', () => {
                    UI.Message.success({ message: "成功对象配置", duration: 0, showClose: true });
                })
            }
            if (index == 1) {
                item.addEventListener('click', () => {
                    UI.Message.warning({ message: "警告对象配置", duration: 0, showClose: true });
                })
            }
            if (index == 2) {
                item.addEventListener('click', () => {
                    UI.Message.error({ message: "失败对象配置", duration: 0, showClose: true });
                })
            }
            if (index == 3) {
                item.addEventListener('click', () => {
                    UI.Message.info({ message: "提示对象配置", duration: 0, showClose: true });
                })
            }
        })

        let loading = document.getElementsByClassName('ld')[0]
        loading.addEventListener('click', () => {
            let ld = UI.Loading.service({
                text: "页面加载中..."
            })
            // 2s后关闭
            setTimeout(() => {
                ld.close();
                UI.Message.success("加载成功")
            }, 2000);
        })

        let upload = document.getElementsByClassName('ul')[0]
        upload.addEventListener('click', () => {
            UI.Upload({
                url: "https://jsonplaceholder.typicode.com/posts/",
                onSuccess() {
                    console.log("上传成功")
                },
                onError() {
                    console.log('失败')
                }
            })
        })
    </script>
</body>

</html>